<template>
  <div class="loading">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
  </div>
</template>

<script>
  export default {}
</script>

<style type="text/css" scoped>
    .loading{
        width: 30px;
        height: 30px;
        animation: load 3s linear infinite;
        -moz-animation: load 3s linear infinite; /* Firefox */
        -webkit-animation: load 3s linear infinite; /* Safari and Chrome */
        -o-animation: load 3s linear infinite; /* Opera */
        position: fixed;
        top: 40%;
        left: 45%;
    } 

    .loading div{
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .loading span{
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #99CC66;
        position: absolute;
        left: 50%;
        margin-top: -10px;
        margin-left: -10px;
        animation: changeBgColor 3s ease infinite;
        -moz-animation: changeBgColor 3s ease infinite; /* Firefox */
        -webkit-animation: changeBgColor 3s ease infinite; /* Safari and Chrome */
        -o-animation: changeBgColor 3s ease infinite; /* Opera */
    }

    @keyframes load{
        0% { -webkit-transform: rotate(0deg); }
        33.3% { -webkit-transform: rotate(120deg); }
        66.6% { -webkit-transform: rotate(240deg); }
        100% { -webkit-transform: rotate(360deg); }
    }

    @-moz-keyframes load{
        0% { -webkit-transform: rotate(0deg); }
        33.3% { -webkit-transform: rotate(120deg); }
        66.6% { -webkit-transform: rotate(240deg); }
        100% { -webkit-transform: rotate(360deg); }
    }

    @-webkit-keyframes load{
        0% { -webkit-transform: rotate(0deg); }
        33.3% { -webkit-transform: rotate(120deg); }
        66.6% { -webkit-transform: rotate(240deg); }
        100% { -webkit-transform: rotate(360deg); }
    }

    @-o-keyframes load{
        0% { -webkit-transform: rotate(0deg); }
        33.3% { -webkit-transform: rotate(120deg); }
        66.6% { -webkit-transform: rotate(240deg); }
        100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes changeBgColor{
        0% { background: #99CC66; }
        33.3% {  background: #FFFF66; }
        66.6% {  background: #FF6666; }
        100% { background: #99CC66; }
    }
    @-moz-keyframes changeBgColor{
        0% { background: #99CC66; }
        33.3% {  background: #FFFF66; }
        66.6% {  background: #FF6666; }
        100% { background: #99CC66; }
    }
    @-webkit-keyframes changeBgColor{
        0% { background: #99CC66; }
        33.3% {  background: #FFFF66; }
        66.6% {  background: #FF6666; }
        100% { background: #99CC66; }
    }
    @-o-keyframes changeBgColor{
        0% { background: #99CC66; }
        33.3% {  background: #FFFF66; }
        66.6% {  background: #FF6666; }
        100% { background: #99CC66; }
    }

    .loading div:nth-child(2){
        -webkit-transform: rotate(120deg);
    }
    
    .loading div:nth-child(3){
        -webkit-transform: rotate(240deg);
    }

    .loading div:nth-child(2) span{
        -webkit-animation-delay: 1s;
    }

    .loading div:nth-child(3) span{
        -webkit-animation-delay: 2s;
    }
    
</style>
